<template>
  <div class="userlist">
    <div class="list">
      <div class="top">
        <el-form ref="form" class="form" label-width="100" :inline="true">
          <el-form-item prop="username" label="用户名称">
            <el-input v-model.trim="page.username" placeholder="请输入用户名称" />
          </el-form-item>
          <el-form-item prop="email" label="用户邮箱">
            <el-input v-model.trim="page.email" placeholder="请输入用户邮箱" />
          </el-form-item>
          <el-form-item prop="role_id" label="角色">
            <el-select v-model.trim="page.role_id" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <template>
            <el-button type="primary" @click="searchEvent">搜索</el-button>
            <el-button @click="eliminateEvent">清除</el-button>
            <el-button type="primary" @click="addEvent">+新增用户</el-button>
          </template>
        </el-form>
      </div>
      <div class="main">
        <el-table :data="list" class="table" :cell-style="setCellStyle">
          <el-table-column label="序号">
            <template v-slot="{ $index }">
              <div>
                {{ (page.page - 1) * page.limit + $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="role" label="角色" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column
            prop="status"
            label="状态"
            :formatter="formatterState"
          />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="editEvent(row)">编辑</el-button>
              <el-button type="text" @click="enableEvent(row)">{{
                obj[row.status]
              }}</el-button>
              <el-button
                type="text"
                @click="removeEvent(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1, 2, 4, 5, 10, 20, 30, 40, 50, 60, 100]"
          :page-size.sync="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </div>
    </div>
    <!-- 新增弹框 -->
    <add ref="add" @getData="getData" />
  </div>
</template>

<script>
import jsCookie from 'js-cookie'
import { userList, userRemove, userStatus } from '@/api/userlist'
import add from './components/add.vue'
export default {
  components: {
    add
  },
  data() {
    return {
      obj: { 0: '启用', 1: '禁用' },
      list: [],
      page: {
        username: '', //	否	string	昵称
        email: '', //	否	string	邮箱
        role_id: '', //	否	string	角色数字 2管理员、3老师、 4学生
        page: 1, //	否	string	页码 默认为1
        limit: +jsCookie.get('limit-change') || 5 //	否	string	页尺寸 默认为10
      },
      total: 1,
      value: '',
      options: [
        {
          value: '超级管理员',
          id: 1
        },

        {
          value: '管理员',
          id: 2
        },
        {
          value: '老师',
          id: 3
        },
        {
          value: '学生',
          id: 4
        }
      ],
      options2: [
        {
          value: '启用',
          id: 1
        },
        {
          value: '禁用',
          id: 0
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await userList(this.page)
      this.list = res.data.data.items
      this.total = res.data.data.pagination.total
      console.log('用户列表', res)
      //  console.log(this.list);
    },
    setCellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.status === 0 && columnIndex === 6) {
        return 'color:red'
      } else {
        return 'color:#606266'
      }
    },
    // 页码改变
    currentChange() {
      this.getData()
    },
    // 页容量改变
    sizeChange() {
      this.page.page = 1
      jsCookie.set('limit-change', this.page.limit)
      this.getData()
    },
    // 新增点击
    addEvent() {
      // 打开弹框
      this.$refs.add.mode = 'add'
      this.$refs.add.isShow = true
    },
    // 编辑点击
    editEvent(row) {
      this.$refs.add.mode = 'edit'
      this.$refs.add.isShow = true
      console.log(row)
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      // console.log('编辑点击', res)
    },
    // 删除点击
    removeEvent(id) {
      this.$confirm('您确定删除改数据吗?', '温馨提示')
        .then(async() => {
          // console.log(id)
          await userRemove(id)
          if (this.page.page > 1 && this.list.length === 1) {
            this.page.page--
          }
          this.$message.success('删除成功')
          this.getData()
        })
        .catch(() => {})
    },
    // 状态数据转换
    formatterState(row, column, cellValue, index) {
      // find: 找出相应的项，拿到相应项的值，找不到undefind
      const findItem = this.options2.find((item) => +item.id === cellValue)
      return findItem ? findItem.value : '-'
    },
    //  启用点击
    async enableEvent(row) {
      await userStatus(row.id)
      row.status = 1 - row.status
    },
    // 搜索点击
    async searchEvent() {
      // console.log(1);
      // const res = await userList(this.page)
      // console.log(res)
      if (this.page.page !== 1) {
        this.page.page = 1
      }
      this.getData()
    },
    // 清除点击
    eliminateEvent() {
      this.$refs.form.resetFields()
      this.page.username = ''
      this.page.email = ''
      this.page.role_id = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.userlist {
  background-color: #ccc;
  padding: 20px;
  // height: 100vh;
  .top {
    background-color: #fff;
    width: 100%;
    height: 120px;
    .form {
      padding: 20px 0 0 30px;
    }
  }
  .main {
    .table {
      padding: 10px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
  }
  .footer {
    background-color: #fff;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
